import React, { Component } from 'react'
import CardContainer from '../component/card.container'
import Slider from 'react-slick'

import '../sass/module/carousel.scss'

class Ruzhuqiye extends Component {
  constructor(props) {
    super(props)
  }

  getCarouselOptions() {
    return {
      arrows: false,
      accessibility: false,
      className: 'carousel-ruzhuqiye',
      dots: false,
      infinite: true,
      speed: 300,
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true
    }
  }

  groupData(data) {
    let temp = data, res = [], size = 3
    while (temp.length > 0)
        res.push(temp.splice(0, size))
    return res
  }

  render() {
    let settings = this.getCarouselOptions()
    let { data } = this.props
    let groupData = this.groupData(data)

    return (
      <CardContainer className="card-50" style={{ display: 'inline-block' }}>

        <span className="border-corner border-lt p-left p-top" />
        <span className="border-corner border-rb p-right p-bottom" />

        <h3>入驻企业</h3>
        <Slider {...settings}>
          {groupData.map((group, index) => {
            return (
              <div className="row" key={index}>
                {group.map((img, index) => {
                  return (
                    <span className={`span-logo ${img}`} key={index}>
                    </span>
                  )
                })}
              </div>
            )
          })}
        </Slider>
      </CardContainer>
    )
  }
}

Ruzhuqiye.defaultProps = {
  data: require("../api.mock/carousel.ruzhuqiye.json")
}

export default Ruzhuqiye